<template>
  <div class="auto-grading">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6" v-for="(stat, index) in statistics" :key="index">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待评分考试列表 -->
    <el-card class="exam-list">
      <template #header>
        <div class="card-header">
          <span>待评分考试</span>
          <el-radio-group v-model="filterStatus" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="pending">待评分</el-radio-button>
            <el-radio-button label="grading">评分中</el-radio-button>
            <el-radio-button label="completed">已完成</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <el-table :data="examList" style="width: 100%">
        <el-table-column prop="name" label="考试名称" />
        <el-table-column prop="date" label="考试日期" width="180" />
        <el-table-column prop="totalStudents" label="考生人数" width="100" />
        <el-table-column prop="gradedCount" label="已评分" width="100" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button 
              type="primary" 
              @click="startAutoGrading(scope.row)"
              :disabled="scope.row.status === 'completed'"
            >
              开始自动评分
            </el-button>
            <el-button 
              link 
              type="primary" 
              @click="viewDetails(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 评分详情对话框 -->
    <el-dialog
      v-model="detailsVisible"
      title="评分详情"
      width="70%"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="评分概况" name="overview">
          <div class="grading-overview">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in gradingStats" :key="index">
                <div class="stat-item">
                  <div class="stat-value">{{ item.value }}</div>
                  <div class="stat-label">{{ item.label }}</div>
                </div>
              </el-col>
            </el-row>
            
            <div class="score-distribution">
              <h4>分数分布</h4>
              <div ref="distributionChart" style="height: 300px"></div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="评分记录" name="records">
          <el-table :data="gradingRecords" style="width: 100%">
            <el-table-column prop="studentName" label="学生姓名" />
            <el-table-column prop="studentId" label="学号" />
            <el-table-column prop="autoScore" label="自动评分" />
            <el-table-column prop="manualScore" label="人工评分" />
            <el-table-column prop="finalScore" label="最终得分" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getGradingStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button 
                  link 
                  type="primary"
                  @click="reviewGrading(scope.row)"
                >
                  复核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 评分进度对话框 -->
    <el-dialog
      v-model="progressVisible"
      title="自动评分进度"
      width="500px"
    >
      <div class="grading-progress">
        <el-progress 
          :percentage="gradingProgress" 
          :status="gradingProgress === 100 ? 'success' : ''"
        />
        <div class="progress-text">
          已完成：{{ gradedCount }}/{{ totalCount }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const router = useRouter()

// 统计数据
const statistics = ref([
  { label: '待评分考试', value: 5 },
  { label: '今日已评分', value: 120 },
  { label: '平均分', value: '85.5' },
  { label: '及格率', value: '92%' }
])

// 考试列表数据
const examList = ref([
  {
    id: 1,
    name: 'C语言期中考试',
    date: '2024-04-01',
    totalStudents: 100,
    gradedCount: 80,
    status: 'grading'
  },
  {
    id: 2,
    name: 'C语言章节测试',
    date: '2024-04-05',
    totalStudents: 50,
    gradedCount: 50,
    status: 'completed'
  }
])

// 评分记录
const gradingRecords = ref([
  {
    studentName: '张三',
    studentId: '2024001',
    autoScore: 85,
    manualScore: 88,
    finalScore: 88,
    status: '已完成'
  },
  {
    studentName: '李四',
    studentId: '2024002',
    autoScore: 92,
    manualScore: null,
    finalScore: 92,
    status: '待复核'
  }
])

// 评分统计
const gradingStats = ref([
  { label: '参考人数', value: 100 },
  { label: '平均分', value: 85.5 },
  { label: '最高分', value: 98 }
])

// 状态过滤
const filterStatus = ref('all')

// 对话框控制
const detailsVisible = ref(false)
const progressVisible = ref(false)
const activeTab = ref('overview')

// 评分进度
const gradingProgress = ref(0)
const gradedCount = ref(0)
const totalCount = ref(0)

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'info',
    grading: 'warning',
    completed: 'success'
  }
  return typeMap[status]
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: '待评分',
    grading: '评分中',
    completed: '已完成'
  }
  return textMap[status]
}

// 获取评分状态标签类型
const getGradingStatusType = (status) => {
  return status === '已完成' ? 'success' : 'warning'
}

// 开始自动评分
const startAutoGrading = (exam) => {
  progressVisible.value = true
  gradedCount.value = 0
  totalCount.value = exam.totalStudents
  
  // 模拟评分进度
  const timer = setInterval(() => {
    if (gradedCount.value < totalCount.value) {
      gradedCount.value++
      gradingProgress.value = Math.floor((gradedCount.value / totalCount.value) * 100)
    } else {
      clearInterval(timer)
      ElMessage.success('评分完成')
      progressVisible.value = false
    }
  }, 100)
}

// 查看详情
const viewDetails = (exam) => {
  detailsVisible.value = true
  // 初始化图表
  setTimeout(() => {
    const chartDom = document.querySelector('.score-distribution div')
    if (chartDom) {
      const chart = echarts.init(chartDom)
      chart.setOption({
        title: { text: '分数分布' },
        xAxis: {
          type: 'category',
          data: ['<60', '60-70', '70-80', '80-90', '90-100']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [5, 15, 30, 35, 15],
          type: 'bar'
        }]
      })
    }
  }, 0)
}

// 复核评分
const reviewGrading = (record) => {
  router.push(`/teacher/grade/${record.examId}/${record.studentId}`)
}
</script>

<style scoped>
.auto-grading {
  padding: 20px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.stat-label {
  color: #909399;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grading-overview {
  padding: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.score-distribution {
  margin-top: 30px;
}

.score-distribution h4 {
  margin-bottom: 20px;
}

.grading-progress {
  padding: 20px;
}

.progress-text {
  text-align: center;
  margin-top: 10px;
  color: #909399;
}
</style> 